﻿/*
RDialog jQuery plugin
=====================

Version: 1.0

Requisites: jQuery, jQueryUi

Features: show a dialog related to an element, and with an arrow pointed to that element

Usage:
- Call `rdialog(options)` method on dialog element
- `options` has:
    - `target`: a jQuery object point to the target element
    - `dock`: a combination of `direction` and `position`. Eg. `lef top`, `top right`, `bottom center`
*/
function RDialog(element, options) {
    var defaults = {
        target: $(window),
        dock: '',
        closeOnEsc: true,
        timeout: 0
    };

    var self = this;
    self.element = element;
    self.element.data('rdialog', self);
    self.options = $.extend({}, defaults, options);

    self.updateLater = function () {
        if (self.options.closeOnEsc) {
            window.setTimeout(function () {
                self.update();
            },
        20);
        }
        else {
            self.update();
        }
    };
    self.update = function () {
        var offset = 7;
        var dock = self.options.dock.split(' ');
        {
            var my = 'center center';
            var at = 'center center';
            var offsetx = 0;
            var offsety = 0;

            switch (dock[0]) {
                case 'top':
                    my = dock[1] + ' bottom';
                    at = dock[1] + ' top';
                    offsety = -offset;
                    break;
                case 'bottom':
                    my = dock[1] + ' top';
                    at = dock[1] + ' bottom';
                    offsety = offset;
                    break;
                case 'left':
                    my = 'right ' + dock[1];
                    at = 'left ' + dock[1];
                    offsetx = -offset;
                    break;
                case 'right':
                    my = 'left ' + dock[1];
                    at = 'right ' + dock[1];
                    offsetx = offset;
                    break;
            }

            self.element.show().css({
                position: 'absolute',
                display: 'block'
            }).position({
                my: my,
                at: at,
                of: self.options.target,
                offset: offsetx + ' ' + offsety,
                collision: 'none none'
            });
        }

        {
            var my = 'center center';
            var at = 'center center';

            switch (dock[0]) {
                case 'top':
                    my = 'center bottom';
                    at = 'center top';
                    break;
                case 'bottom':
                    my = 'center top';
                    at = 'center bottom';
                    break;
                case 'left':
                    my = 'right center';
                    at = 'left center';
                    break;
                case 'right':
                    my = 'left center';
                    at = 'right center';
                    break;
                default:
                    return;
            }

            var arrow = $('.arrow', self.element);
            if (!arrow.length) {
                arrow = $('<div>').addClass('arrow').prependTo(self.element);
            }
            arrow.removeClass().addClass('arrow').addClass('arrow-{0}'.format(dock[0])).position({
                my: my,
                at: at,
                of: options.target,
                collision: 'none none'
            });
        }

        if (self.options.timeout > 0) {
            window.setTimeout(function () {
                self.element.hide();
            }, self.options.timeout);
        }
    };

    self.updateLater();
    $(window).resize(function () {
        if (self.element.is(':visible')) {
            self.update();
        }
    });

    //$.event.stopPropagation();
    if (self.options.closeOnEsc) {
        self.element.click(function (e) {
            e.stopPropagation();
        }).keydown(function (e) {
            if (e.which == 27) {
                self.element.hide();
            }
        }).bind('clickoutside', function (e) {
            if (self.element.is(':visible')) {
                self.element.hide();
            }
        })
    }
}

$.fn.rdialog = function (options) {
    var dialog = this.data('rdialog');
    if (!dialog) {
        dialog = new RDialog(this, options);
    }
    else {
        dialog.options = $.extend({}, dialog.options, options);
    }
    dialog.updateLater();
};